<template>
    <div>
        <div class="outmain ba_f dtu">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>基本设置</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="取餐地址">
                    <el-input v-model="form.address" disabled></el-input>
                </el-form-item>
                <el-form-item label="经纬度">
                    <el-input v-model="form.lng" disabled style="width: 190px" class=""></el-input>
                    <el-input v-model="form.lat" disabled style="width: 190px" class="mar_l20"></el-input>
                </el-form-item>
                <el-form-item label="预计配送时间">
                    <el-input placeholder="" v-model="form.withinTime" type="number" :disabled="true">
                        <template slot="prepend">三公里内</template>
                        <template slot="append">分钟</template>
                    </el-input>
                    <a href="#" class="mar_l20" @click="dialogFormVisible = true">时长设置</a>
                </el-form-item>
                <el-form-item label="配送范围">
                    <el-input placeholder="请输入配送范围" v-model="form.range" type="number">
                        <template slot="append">km</template>
                    </el-input>
                </el-form-item>
                <div class="shuju_title mar_b20">
                    <div class="shuju_title_text">
                        <span>配送设置</span>
                    </div>
                </div>
                <el-form-item label="配送费">
                    <el-radio-group v-model="form.type" @change="psType">
                        <el-radio label="1">固定金额</el-radio>
                        <el-radio label="2">按距离收取</el-radio>
                        <el-radio label="3">按区域收取</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" v-show="form.type=='1'">
                    <div>
                        <el-input placeholder="请输入起送价" v-model="form.fixedStartMoney" type="number">
                            <template slot="prepend">起送价</template>
                            <template slot="append">元</template>
                        </el-input>
                    </div>
<!--                    <div class="mar_t20">-->
<!--                        <el-input placeholder="请输入金额" v-model="form.fixedFullMoney" type="number">-->
<!--                            <template slot="prepend">满</template>-->
<!--                            <template slot="append">元免配送费</template>-->
<!--                        </el-input>-->
<!--                    </div>-->
                    <div class="mar_t20">
                        <el-input placeholder="请输入金额" v-model="form.money" type="number">
                            <template slot="prepend">每单</template>
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="" v-show="form.type=='2'">
                    <div>
                        <el-form-item label="路径计算方式">
                            <el-radio-group v-model="form.calculationType">
                                <el-radio label="1">直线距离</el-radio>
                                <el-radio label="2">骑行规划距离</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="mar_t20">
                        <el-input placeholder="请输入起送价" v-model="form.startMoney" type="number">
                            <template slot="prepend">起送价</template>
                            <template slot="append">元</template>
                        </el-input>
<!--                        <el-input placeholder="请输入金额" v-model="form.fullMoney" type="number">-->
<!--                            <template slot="prepend">满</template>-->
<!--                            <template slot="append">元免配送费</template>-->
<!--                        </el-input>-->
                    </div>
                    <div class="mar_t20">
                        <el-input placeholder="请输入起步价" v-model="form.distanceStartMoney" type="number">
                            <template slot="prepend">起步价</template>
                            <template slot="append">元</template>
                        </el-input>
                        <el-input placeholder="请输入公里数" v-model="form.startDistance" type="number">
                            <template slot="append">公里，每增加1公里加</template>
                        </el-input>
                        <el-input placeholder="请输入金额" v-model="form.overstepMoney" type="number">
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                    <div class="mar_t20">
                        <el-input placeholder="请输入公里数" v-model="form.overstepDistance" type="number">
                            <template slot="prepend">超出</template>
                            <template slot="append">公里后，每增加1公里加</template>
                        </el-input>
                        <el-input placeholder="请输入金额" v-model="form.overstepDistanceMoney" type="number">
                            <template slot="append">元，最高收取</template>
                        </el-input>
                        <el-input placeholder="请输入金额" v-model="form.maxMoney" type="number">
                            <template slot="append">元</template>
                        </el-input>
                        <div class="yb_margin">计费规则：例如设置 起步3km内5元，每增加 1km 加 1 元，超过6km，每增加 1km 加 2 元。如果配送距离5km，配送费：5 +
                            （5-3）X 1 = 7元；配送距离8km，配送费：5 + （8-3）X 2 = 15元。
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="特殊时间段" v-show="form.type=='1' || form.type=='2'">
                    <div class="flex-1 mar_l15">
                        <div class="time_item mar_b10" v-for="(item,index) in form.timeArr"
                             :key="index">
<!--                            <el-time-select-->
<!--                                    v-model="item.startTime"-->
<!--                                    :picker-options="{start: '00:00',step: '00:30',end: '23:55'}"-->
<!--                                    placeholder="选择时间"-->
<!--                                    style="width: 109px">-->
<!--                            </el-time-select>-->
                          <el-time-picker style="width: 109px" v-model="item.startTime" placeholder="任意时间点" value-format="HH:mm" format="HH:mm"></el-time-picker>
                            <span class="mar_lr10">-</span>
<!--                            <el-time-select-->
<!--                                    v-model="item.endTime"-->
<!--                                    :picker-options="{start: '00:00',step: '00:30',end: '23:55', minTime: item.startTime}"-->
<!--                                    placeholder="选择时间"-->
<!--                                    style="width: 109px"-->
<!--                            >-->
<!--                            </el-time-select>-->
                          <el-time-picker style="width: 109px" v-model="item.endTime" placeholder="任意时间点" value-format="HH:mm" format="HH:mm"></el-time-picker>
                            <el-input placeholder="另加配送费" type="number" v-model="item.money"
                                      class="inppsf mar_l20" style="width: 190px;">
                                <template slot="append">元</template>
                            </el-input>
                            <el-button type="text" @click="deltimeInterval1(index)"
                                       class="fon_12 mar_l10">删除
                            </el-button>
                        </div>
                        <el-button v-show="form.timeArr.length<3" type="text" @click="addtimeInterval1">
                            <Icon type="md-add"/>
                            添加特殊时段
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item label="" v-show="form.type=='3'" class="deliverLeft" style="margin-left: -160px;">
                    <div class="flext">
                        <div>
                            <div class="deliveryScopeItem mar_b10 rel" v-for="(item,pIndex) in areaArr" :key="pIndex"
                                 :class="item.color" @click="oncloseicon(pIndex)" v-model="item.selected = false">
                                <div class="cancleDeliveryScope ba_f ab flex t_c curs"
                                     @click="delDeliveryMethod(pIndex)">
                                    <i class="el-icon-circle-close cancle-icon"></i>
                                </div>
                                <div class="deliveryScopeItemLine shape mar_b5 flex-start">
                                    <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">形 状：</label>
                                    <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                                        <el-radio v-model="item.shape" :label="1" @change="handleChange(1,pIndex)">
                                            圆形
                                        </el-radio>
                                        <el-radio v-model="item.shape" :label="2" @change="handleChange(2,pIndex)">
                                            多边形
                                        </el-radio>
                                    </div>
                                </div>
                                <div class="deliveryScopeItemLine mar_b5 flex-start">
                                    <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">配送费：</label>
                                    <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                                        <el-input placeholder="" type="number" v-model="item.money" class="inppsf">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="deliveryScopeItemLine mar_b5 flex-start">
                                    <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">起送价：</label>
                                    <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                                        <el-input placeholder="" type="number" v-model="item.startMoney" class="inppsf">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
<!--                                <div class="deliveryScopeItemLine mar_b5 flex-start">-->
<!--                                    <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">满免配送费：</label>-->
<!--                                    <div class="deliveryScopeItemLineCont flex-1 mar_l15">-->
<!--                                        <el-input placeholder="" type="number" v-model="item.fullMoney" class="inppsf">-->
<!--                                            <template slot="append">元</template>-->
<!--                                        </el-input>-->
<!--                                    </div>-->
<!--                                </div>-->
                                <div class="deliveryScopeItemLine mar_b5 flex-start" v-show="item.shape==1">
                                    <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">半 径：</label>
                                    <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                                        <el-input placeholder="" type="number" v-model="item.radius"
                                                  @input="radius($event,pIndex)" class="inppsf">
                                            <template slot="append">米</template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="deliveryScopeItemLine mar_b5 flex-start">
                                    <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">特殊时段：</label>
                                    <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                                        <div class="time_item mar_b10" v-for="(item,index) in item.timeArr"
                                             :key="index">
<!--                                            <el-time-select-->
<!--                                                    v-model="item.startTime"-->
<!--                                                    :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"-->
<!--                                                    placeholder="选择时间"-->
<!--                                                    style="width: 109px">-->
<!--                                            </el-time-select>-->
                                          <el-time-picker style="width: 109px" v-model="item.startTime" placeholder="任意时间点" value-format="HH:mm" format="HH:mm"></el-time-picker>
                                            <span class="mar_lr10">-</span>
<!--                                            <el-time-select-->
<!--                                                    v-model="item.endTime"-->
<!--                                                    :picker-options="{start: '00:00',step: '00:05',end: '23:55',minTime: item.startTime}"-->
<!--                                                    placeholder="选择时间"-->
<!--                                                    style="width: 109px"-->
<!--                                            >-->
<!--                                            </el-time-select>-->
                                          <el-time-picker style="width: 109px" v-model="item.endTime" placeholder="任意时间点" value-format="HH:mm" format="HH:mm"></el-time-picker>
                                            <el-input placeholder="另加配送费" type="number" v-model="item.money"
                                                      class="inppsf mar_t5" style="width: 190px;">
                                                <template slot="append">元</template>
                                            </el-input>
                                            <el-button type="text" @click="deltimeInterval(pIndex)"
                                                       class="fon_12 mar_l10">删除
                                            </el-button>
                                        </div>
                                        <el-button v-show="item.timeArr.length<3" type="text" @click="addtimeInterval(pIndex)">
                                            <Icon type="md-add"/>
                                            添加时段
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            <div class="add-delivery-scope subjectcolor2 curs fon_14" @click="addDeliveryMethod">
                                +添加配送范围
                            </div>
                        </div>
                        <div class="flex-1">
                            <div class="nofull-map-wrap flex-1" id="container"></div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
        <el-dialog title="配送时间" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
            <el-form :model="form" label-width="180px">
                <el-form-item label="三公里内">
                    <el-input placeholder="" v-model="form.withinTime" type="number">>
                        <template slot="append">分钟</template>
                    </el-input>
                    <div class="yb_margin">请输入三公里内配送时长</div>
                </el-form-item>
                <el-form-item label="三公里外">
                    <el-input placeholder="" v-model="form.exceedTime" type="number">
                        <template slot="prepend">每增加一公里</template>
                        <template slot="append">分钟</template>
                    </el-input>
                    <div class="yb_margin">请输入三公里外每增加一公里增加的时长</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getStoreConfig, postStoreConfig} from "@/api/setup";
    import {getStoreBasic} from "@/api/shop";

    export default {
        created() {
            this.initData();
        },
        data() {
            return {
                form: {
                    lng: 114.304692,
                    lat: 30.59331,
                    address: '湖北省武汉市武昌区沿江大道230号',
                    withinTime: '',
                    exceedTime: '',
                    type: '3',
                    range: '',
                    calculationType: '',
                    startMoney: '',
                    // fullMoney: '',
                    distanceStartMoney: '',
                    startDistance: '',
                    overstepMoney: '',
                    overstepDistance: '',
                    overstepDistanceMoney: '',
                    maxMoney: '',
                    fixedStartMoney: '',
                    fixedFullMoney: '',
                    money: '',
                    timeArr: [],
                },
                areaArr: [
                    {
                        color: "ss1",
                        shape: 1,
                        money: 5,
                        startMoney: 20,
                        // fullMoney: 50,
                        radius: 2000,
                        selected: false,
                        circle: '',
                        details: '',
                        lng: '',
                        lat: '',
                        timeArr: []
                    }
                ],
                dialogFormVisible: false,
                mapAddress: "湖北省武汉市",
                mapLat: 30.59331,
                mapLng: 114.304692,
                sstt: ['ss1', 'ss2', 'ss3', 'ss4', 'ss5'],
                selectCol: ['ss1'],
                markersArray: [],
                map: '',
                center: '',
                path: [],
                color1: 153,
                color2: 214,
                color3: 255,
                xz: 0
            }
        },
        methods: {
            async initData() {
                const {data} = await getStoreConfig({ident: 'delivery'});
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if (data.type == '3') {
                    for (let i = 0; i < data.areaArr.length; i++) {
                        data.areaArr[i].circle = ''
                    }
                    if (data.areaArr) {
                        this.areaArr = data.areaArr.map((v => (
                            {
                                shape: v.shape,
                                money: v.money,
                                startMoney: v.startMoney,
                                // fullMoney: v.fullMoney,
                                lng: v.lng,
                                lat: v.lat,
                                circle: v.circle,
                                radius: +v.radius,
                                selected: v.selected,
                                color: v.color,
                                details: v.details,
                                timeArr: v.timeArr
                            }
                        )))
                    }
                    setTimeout(() => {
                        this.init();
                    }, 0)
                }
            },
            addtimeInterval1() {
                let specObj = {startTime: '00:00', endTime: '00:00', money: '',}
                this.$set(this.form.timeArr, this.form.timeArr.length, specObj)
            },
            deltimeInterval1(index) {
                this.$delete(this.form.timeArr, index)
            },
            addDeliveryMethod() {
                let list = [];
                //  if(this.areaArr.length==1){
                //   console.log('123')
                //   this.sstt.shift()
                //   console.log('234',this.sstt)
                // }
                list = this.sstt.filter(item => {
                    return this.selectCol.indexOf(item) === -1
                });
                console.log(this.areaArr, list)
                console.log("listlistlist", list)
                console.log("changdu", this.areaArr.length)
                if (this.areaArr.length >= 1) {
                    list.shift()
                }
                if (this.areaArr.length > 3) {
                    // list.push(['ss1'])
                    list = []
                    list = this.sstt.filter(item => {
                        return this.selectCol.indexOf(item) === -1
                    });
                }
                if (this.areaArr.length > 4) return alert('最多添加5组数据');
                if (list[0] == 'ss1') {
                    var color1 = 64;
                    var color2 = 158;
                    var color3 = 255;
                }
                if (list[0] == 'ss2') {
                    var color1 = 103;
                    var color2 = 194;
                    var color3 = 58;
                }
                if (list[0] == 'ss3') {
                    var color1 = 230;
                    var color2 = 162;
                    var color3 = 60;
                }
                if (list[0] == 'ss4') {
                    var color1 = 245;
                    var color2 = 108;
                    var color3 = 108;
                }
                if (list[0] == 'ss5') {
                    var color1 = 255;
                    var color2 = 127;
                    var color3 = 0;
                }
                let specObj = {
                    color: list[0],
                    shape: 1,
                    money: 5,
                    radius: 2000,
                    startMoney: 20,
                    // fullMoney: 50,
                    selected: false,
                    circle: new qq.maps.Circle({//圆形
                        //多边形是否可点击。
                        center: this.center,
                        clickable: true,
                        //鼠标在多边形内的光标样式。
                        cursor: 'auto',
                        //多边形是否可编辑。
                        editable: true,
                        //圆形的半径。
                        radius: 2000,
                        //多边形的填充色，可通过Color对象的alpha属性设置透明度。
                        //fillColor: '#5f9ea0',
                        fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
                        //要显示多边形的地图。
                        map: this.map,
                        //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
                        strokeColor: new qq.maps.Color(color1, color2, color3, 1),
                        //多边形的边框样式。实线是solid，虚线是dash。
                        strokeDashStyle: 'solid',
                        //多边形的边框线宽。
                        strokeWeight: 3,
                        //多边形是否可见。
                        visible: true,
                        //多边形的zIndex值。
                        zIndex: 1000
                    }),
                    timeArr: [],
                };
                qq.maps.event.addListener(specObj.circle, 'radius_changed', (event) => {
                    this.areaArr[this.xz].radius = Math.round(event.target.radius);
                    console.log("半径" + event.target.radius);
                });
                qq.maps.event.addListener(specObj.circle, 'center_changed', function (event) {
                    console.log("中心点" + event.target.center);
                });
                this.$set(this.areaArr, this.areaArr.length, specObj)
                // this.$set(this.areaArr[index], selected, true)
                this.$set(this.selectCol, this.selectCol.length, list[0])
                console.log(this.areaArr, this.areaArr.length, specObj, this.sstt, this.selectCol,)
                this.oncloseicon(this.areaArr.length - 1)
            },
            //删除地图
            delDeliveryMethod(index) {
                let list = [];
                if (this.areaArr[index].shape == 1) {
                    this.areaArr[index].circle.setMap(null);
                } else {
                    this.areaArr[index].details.setMap(null);
                }
                list = this.sstt.filter(item => {
                    return this.selectCol.indexOf(item) === -1
                });
                this.$delete(this.selectCol, this.selectCol.findIndex(item => item == this.areaArr[index].color))
                this.$delete(this.areaArr, index)
            },
            //新增时间段
            addtimeInterval(pindex) {
                for (let i = 0; i < this.areaArr.length; i++) {
                    let specObj = {startTime: '00:00', endTime: '00:00', money: ''}
                    if(pindex==i){
                        this.$set(this.areaArr[i].timeArr, this.areaArr[i].timeArr.length, specObj)
                    }
                }
            },
            //删除时间段
            deltimeInterval(pindex) {
                for (let i = 0; i < this.areaArr.length; i++) {
                    if(pindex==i){
                        this.$delete(this.areaArr[i].timeArr, pindex)
                    }
                }
            },
           async psType(val){
                if(val=='3'){
                    setTimeout(() => {
                        this.init();
                    }, 0)
                }
            },
            async init() {
                const {data} = await getStoreBasic();
                var that = this;
                var lat = data.lat ? +data.lat : 30.59331;
                var lng = data.lng ? +data.lng : 114.304692;
                that.center = new qq.maps.LatLng(lat, lng);
                that.map = new qq.maps.Map(document.getElementById('container'), {
                    center: that.center,
                    zoom: 13
                });
                that.path = [
                    new qq.maps.LatLng(lat + 0.018, lng + 0.018),
                    new qq.maps.LatLng(lat - 0.018, lng + 0.018),
                    new qq.maps.LatLng(lat - 0.018, lng - 0.018),
                    new qq.maps.LatLng(lat + 0.018, lng - 0.018)
                ];
                qq.maps.event.addListener(that.map, 'click', function (event) {
                    //alert(that.xz)
                    //alert(event.latLng)
                    console.log(that.areaArr)
                });
                for (var i = 0, l = that.areaArr.length; i < l; i++) {
                    console.log(666, that.areaArr.length)
                    if (this.areaArr[i].color == 'ss1') {
                        var color1 = 64;
                        var color2 = 158;
                        var color3 = 255;
                    }
                    if (this.areaArr[i].color == 'ss2') {
                        var color1 = 103;
                        var color2 = 194;
                        var color3 = 58;
                    }
                    if (this.areaArr[i].color == 'ss3') {
                        var color1 = 230;
                        var color2 = 162;
                        var color3 = 60;
                    }
                    if (this.areaArr[i].color == 'ss4') {
                        var color1 = 245;
                        var color2 = 108;
                        var color3 = 108;
                    }
                    if (this.areaArr[i].color == 'ss5') {
                        var color1 = 255;
                        var color2 = 127;
                        var color3 = 0;
                    }
                    if (i == 0) {
                        var editable = true;
                        var zIndex = 1000;
                    } else {
                        var editable = false;
                        var zIndex = 100;
                    }
                    if (that.areaArr[i].shape == 1) {//圆形
                        that.areaArr[i].circle = new qq.maps.Circle({//圆形
                            //多边形是否可点击。
                            center: that.areaArr[i].lat ? new qq.maps.LatLng(that.areaArr[i].lat, that.areaArr[i].lng) : that.center,
                            clickable: true,
                            //鼠标在多边形内的光标样式。
                            cursor: 'auto',
                            //多边形是否可编辑。
                            editable: editable,
                            //圆形的半径。
                            radius: that.areaArr[i].radius,
                            //多边形的填充色，可通过Color对象的alpha属性设置透明度。
                            //fillColor: '#5f9ea0',
                            fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
                            //要显示多边形的地图。
                            map: that.map,
                            //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
                            strokeColor: new qq.maps.Color(color1, color2, color3, 1),
                            //多边形的边框样式。实线是solid，虚线是dash。
                            strokeDashStyle: 'solid',
                            //多边形的边框线宽。
                            strokeWeight: 3,
                            //多边形是否可见。
                            visible: true,
                            //多边形的zIndex值。
                            zIndex: zIndex
                        });
                    } else {//多边形
                        // res=await this.request({data:{id:{$store['id']},item:i},url:"{$_W['siteroot']}/app/index.php?i={$_W['uniacid']}&c=entry&do=PolygonPath&m={$_GPC['m']}"})
                        // if(res.errno==0){
                        var polygonDetails = [];
                        for (var k = 0, j = this.areaArr[i].details.length; k < j; k++) {
                            polygonDetails.push(new qq.maps.LatLng(this.areaArr[i].details[k].lat, this.areaArr[i].details[k].lng));
                        }
                        console.log(polygonDetails)
                        // }
                        that.areaArr[i].details = new qq.maps.Polygon({//多边形
                            //多边形是否可点击。
                            clickable: true,
                            //鼠标在多边形内的光标样式。
                            cursor: 'auto',
                            //多边形是否可编辑。
                            editable: editable,
                            //多边形的填充色，可通过Color对象的alpha属性设置透明度。
                            //fillColor: '#5f9ea0',
                            fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
                            //要显示多边形的地图。
                            map: that.map,
                            //多边形的路径，以经纬度坐标数组构成。
                            path: polygonDetails,
                            //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
                            strokeColor: new qq.maps.Color(color1, color2, color3, 0.5),
                            //多边形的边框样式。实线是solid，虚线是dash。
                            strokeDashStyle: 'solid',
                            //多边形的边框线宽。
                            strokeWeight: 3,
                            //多边形是否可见。
                            visible: true,
                            //多边形的zIndex值。
                            zIndex: zIndex
                        });
                    }
                }
                qq.maps.event.addListener(that.areaArr[that.xz].circle, 'click', function (event) {
                    //alert(that.xz)
                    //alert(event.latLng)
                });
                new qq.maps.Marker({
                    position: new qq.maps.LatLng(lat, lng),
                    draggable: true,
                    animation: qq.maps.MarkerAnimation.DROP,
                    map: that.map
                });
                qq.maps.event.addListener(that.areaArr[that.xz].circle, 'radius_changed', function (event) {
                    that.areaArr[that.xz].radius = Math.round(event.target.radius);
                    console.log("半径" + event.target.radius);
                });
                qq.maps.event.addListener(that.areaArr[that.xz].circle, 'center_changed', function (event) {
                    console.log("中心点" + event.target.center);
                });
                qq.maps.event.addListener(that.areaArr[that.xz].details, 'adjustNode', function (event) {
                    console.log("多边形路径" + event.path.elems);
                });
                qq.maps.event.addListener(that.areaArr[that.xz].details, 'insertNode', function (event) {
                    console.log("多边形路径" + event.path.elems);
                });
                qq.maps.event.addListener(that.areaArr[that.xz].details, 'removeNode', function (event) {
                    console.log("多边形路径" + event.path.elems);
                });
            },
            //单选按钮切换
            handleChange(value, index) {
                if (this.areaArr[index].color == 'ss1') {
                    var color1 = 64;
                    var color2 = 158;
                    var color3 = 255;
                }
                if (this.areaArr[index].color == 'ss2') {
                    var color1 = 103;
                    var color2 = 194;
                    var color3 = 58;
                }
                if (this.areaArr[index].color == 'ss3') {
                    var color1 = 230;
                    var color2 = 162;
                    var color3 = 60;
                }
                if (this.areaArr[index].color == 'ss4') {
                    var color1 = 245;
                    var color2 = 108;
                    var color3 = 108;
                }
                if (this.areaArr[index].color == 'ss5') {
                    var color1 = 255;
                    var color2 = 127;
                    var color3 = 0;
                }
                if (value == 2) {
                    //this.areaArr[index].circle.setVisible(false)
                    this.areaArr[index].circle.setMap(null);
                    this.areaArr[index].details = new qq.maps.Polygon({//多边形
                        //  //多边形是否可点击。
                        clickable: true,
                        //鼠标在多边形内的光标样式。
                        cursor: 'auto',
                        //多边形是否可编辑。
                        editable: true,
                        //多边形的填充色，可通过Color对象的alpha属性设置透明度。
                        //fillColor: '#5f9ea0',
                        fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
                        //要显示多边形的地图。
                        map: this.map,
                        //多边形的路径，以经纬度坐标数组构成。
                        path: this.path,
                        //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
                        strokeColor: new qq.maps.Color(color1, color2, color3, 1),
                        //多边形的边框样式。实线是solid，虚线是dash。
                        strokeDashStyle: 'solid',
                        //多边形的边框线宽。
                        strokeWeight: 3,
                        //多边形是否可见。
                        visible: true,
                        //多边形的zIndex值。
                        zIndex: 1000
                    });
                    qq.maps.event.addListener(this.areaArr[index].details, 'adjustNode', function (event) {
                        console.log("多边形路径" + event.path.elems);
                    });
                    qq.maps.event.addListener(this.areaArr[index].details, 'insertNode', function (event) {
                        console.log("多边形路径" + event.path.elems);
                    });
                    qq.maps.event.addListener(this.areaArr[index].details, 'removeNode', function (event) {
                        console.log("多边形路径" + event.path.elems);
                    });
                } else {
                    this.areaArr[index].details.setMap(null);
                    this.areaArr[index].circle = new qq.maps.Circle({//圆形
                        //多边形是否可点击。
                        center: this.center,
                        clickable: true,
                        //鼠标在多边形内的光标样式。
                        cursor: 'auto',
                        //多边形是否可编辑。
                        editable: true,
                        //圆形的半径。
                        radius: 2000,
                        //多边形的填充色，可通过Color对象的alpha属性设置透明度。
                        //fillColor: '#5f9ea0',
                        fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
                        //要显示多边形的地图。
                        map: this.map,
                        //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
                        strokeColor: new qq.maps.Color(color1, color2, color3, 1),
                        //多边形的边框样式。实线是solid，虚线是dash。
                        strokeDashStyle: 'solid',
                        //多边形的边框线宽。
                        strokeWeight: 3,
                        //多边形是否可见。
                        visible: true,
                        //多边形的zIndex值。
                        zIndex: 1000
                    });
                    qq.maps.event.addListener(this.areaArr[index].circle, 'radius_changed', (event) => {
                        this.areaArr[index].radius = Math.round(event.target.radius);
                        console.log("半径" + event.target.radius);
                    });
                    qq.maps.event.addListener(this.areaArr[index].circle, 'center_changed', function (event) {
                        console.log("中心点" + event.target.center);
                    });
                }
                console.log("q按钮" + value);
                // this.hideshow=this.areaArr.length;
            },
            //点击关闭图标
            oncloseicon(index) {
                //alert(index)
                this.xz = index
                this.$set(this.areaArr[index], 'selected', true)
                console.log(this.areaArr[index])
                if (this.areaArr[index].shape == 2) {
                    this.areaArr[index].details.setOptions({
                        editable: true,
                        zIndex: 1000
                    })
                } else {
                    this.areaArr[index].circle.setOptions({
                        editable: true,
                        zIndex: 1000
                    })
                }
                for (let i = 0; i < this.areaArr.length; i++) {
                    if (i != index) {
                        if (this.areaArr[i].shape == 2) {
                            this.areaArr[i].details.setOptions({
                                editable: false,
                                zIndex: 100
                            })
                        } else {
                            this.areaArr[i].circle.setOptions({
                                editable: false,
                                zIndex: 100
                            })
                        }
                    }
                }
            },
            //修改半径
            radius(e, index) {
                this.areaArr[index].circle.setRadius(+e)
            },

            submitForm() {
                console.log(this.areaArr)
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        console.log(123)
                        this.form.ident = 'delivery'
                        if (this.form.type == '3') {
                            var areaArr = [];
                            for (var i = 0, l = this.areaArr.length; i < l; i++) {
                                if (this.areaArr[i].shape == 1) {//圆形
                                    areaArr.push({
                                        shape: 1,
                                        color: this.areaArr[i].color,
                                        lat: this.areaArr[i].circle.center.lat,
                                        lng: this.areaArr[i].circle.center.lng,
                                        radius: this.areaArr[i].radius,
                                        money: this.areaArr[i].money,
                                        startMoney: this.areaArr[i].startMoney,
                                        // fullMoney: this.areaArr[i].fullMoney,
                                        selected: this.areaArr[i].selected,
                                        timeArr: this.areaArr[i].timeArr,
                                    })
                                } else {
                                    var details = [];
                                    for (var k = 0, j = this.areaArr[i].details.path.elems.length; k < j; k++) {
                                        details.push({
                                            lat: this.areaArr[i].details.path.elems[k].lat,
                                            lng: this.areaArr[i].details.path.elems[k].lng,
                                        })
                                    }
                                    areaArr.push({
                                        shape: 2,
                                        details: details,
                                        radius: 0,
                                        money: this.areaArr[i].money,
                                        startMoney: this.areaArr[i].startMoney,
                                        // fullMoney: this.areaArr[i].fullMoney,
                                        color: this.areaArr[i].color,
                                        selected: this.areaArr[i].selected,
                                        timeArr: this.areaArr[i].timeArr,
                                    })
                                }
                            }
                            this.form.areaArr = areaArr
                        }
                        const {msg} = await postStoreConfig(this.form);
                        this.$baseMessage(msg, "success");
                        this.initData();
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
    .nofull-map-wrap {
        margin-left: 50px;
        border: 1px solid #ccc;
    }

    .deliveryScopeItem .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding-right: 0px;
    }

    .dtu .el-form-item__content {
        line-height: 34px;
    }

    .dtu .el-input__icon {
        line-height: 34px;
    }

    .cancle-icon {
        width: 18px;
        height: 18px;
    }

    .cancleDeliveryScope {
        width: 20px;
        height: 20px;
        right: 0px;
        top: 1px;
    }

    .deliveryScopeItem {
        width: 400px;
        border-width: 1px 1px 1px 4px;
        border-style: solid;
        border-image: initial;
        padding-right: 10px
    }

    .deliveryScopeItemLine .deliveryScopeItemLineTitle {
        flex: 0 0 85px;
    }

    .deliveryScopeItemLine .deliveryScopeItemLineCont .el-input-group {
        width: auto;
    }

    .dtu.el-form-item__content .el-input-group {
        vertical-align: middle;
    }

    .ss1 {
        border-color: rgb(64, 158, 255);
    }

    .ss2 {
        border-color: rgb(103, 194, 58);
    }

    .ss3 {
        border-color: rgb(230, 162, 60);
    }

    .ss4 {
        border-color: rgb(245, 108, 108);
    }

    .ss5 {
        border-color: rgb(255, 127, 0);
    }

    #container {
        width: 1100px;
        min-height: 800px;
        height: 100%;
    }
</style>
